<template>
  <el-dialog
    title="新增文章"
    :visible="showPrewVisitDialog"
    @close="articleBtnCancel"
  >
    <el-form
      :model="articleForm"
      :rules="rules"
      ref="addArticleForm"
      label-width="90px"
    >
      <el-form-item label="文章标题:" prop="title">
        <el-input
          v-model="articleForm.title"
          autocomplete="off"
          placeholder="请输入文章标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody">
        <!-- 富文本 -->
        <div class="ql-snow">
          <QuillEditor
            class="info-editor"
            v-model="articleForm.articleBody"
            ref="QuillEditor"
            :options="editorOption"
          />
        </div>
      </el-form-item>
      <el-form-item label="视频地址:" prop="videoURL">
        <el-input
          v-model="articleForm.videoURL"
          autocomplete="off"
          placeholder="请输入视频地址"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 弹层确定  和取消 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="articleBtnCancel">取消</el-button>
      <el-button type="primary" @click="articleBtnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import { add, update } from '../../api/hmmm/articles'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
  [{ list: 'ordered' }, { list: 'bullet' }],
  ['blockquote', 'code-block'],
  ['image', 'link']
]
export default {
  name: 'editor',
  components: {
    QuillEditor: quillEditor
  },
  props: {
    showPrewVisitDialog: {
      type: Boolean,
      default: false
    },
    addArticleForm: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      dialogFormVisible: false,
      articleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      // 富文本编辑器配置
      content: '',
      editorOption: {
        placeholder: '',
        theme: 'snow', // 主题风格
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  console.log(value)
                  document.querySelector('#imgUp').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  watch: {
    addArticleForm(newVal, oldVal) {
      this.articleForm = newVal
    }
  },
  methods: {
    async articleBtnOk() {
      try {
        await this.$refs.addArticleForm.validate()
        if (this.articleForm.id) {
          await update(this.articleForm)
        } else {
          await add(this.articleForm)
        }
        this.$emit('updateList')
        this.$emit('update:showPrewVisitDialog', false)
      } catch (error) {
        console.log(error)
      }
    },
    articleBtnCancel() {
      this.articleForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
      this.$refs.addArticleForm.resetFields()
      this.$emit('update:showPrewVisitDialog', false)
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>
::v-deep .ql-editor {
  height: 200px;
}
</style>
